import { Button } from "@arco-design/web-react";
import type { PropsWithChildren, ReactNode } from "react";
import "./modal.css";

export function ModalContent({ children }: PropsWithChildren): ReactNode {
	return <div className="kl-modal-content">{children}</div>;
}

export function ModalHeader({ children }: PropsWithChildren): ReactNode {
	return (
		<div
			className="kl-modal-header arco-modal-header"
			style={{ display: "block" }}
		>
			<div className="arco-modal-title">{children}</div>
		</div>
	);
}

export function ModalBody({ children }: PropsWithChildren): ReactNode {
	return <div className="arco-modal-body">{children}</div>;
}

interface ModalFooterProps {
	okText?: ReactNode;
	cancelText?: ReactNode;
	okLoading?: boolean;
	okDisabled?: boolean;
	onOk?: (e: Event) => void;
	onCancel?: (e: Event) => void;
}

export function ModalFooter({
	okText = "确定",
	cancelText = "取消",
	okLoading = false,
	okDisabled = false,
	onOk,
	onCancel,
}: ModalFooterProps): ReactNode {
	return (
		<div className="kl-modal-header arco-modal-footer">
			<Button onClick={onCancel}>{cancelText}</Button>
			<Button
				type="primary"
				onClick={onOk}
				loading={okLoading}
				disabled={okDisabled}
			>
				{okText}
			</Button>
		</div>
	);
}
